<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <script src="./el.js"></script> -->
    <script src="./el5.js"></script>
    <style>
        html,body{
            height: 100%;
            overflow: hidden;
        }
        #content{
            margin: 100px auto;
            width:30%;
            height: 600px; 
        }
        .up_btn{
            position: absolute;
            width: 80px;
            top: 20px;
            text-align: center;
            font-weight: 600;
            border: 1px solid rgb(11, 83, 238);
            color: rgb(11, 83, 238);
            /* background-color: rgba(86, 168, 235, 0.692); */
            background-color: #ffffff94;
            border-radius: 5px;
            padding: 10px;
            z-index: 2;
            cursor: pointer;
        }
        .up_btn:first{
            left: 20px;
        }
        .up_btn:nth-child(2){
            left: 120px;
        }
        .up_btn:nth-child(3){
            left: 240px;
        }
        .up_btn:nth-child(4){
            left: 360px;
        }
        .up_btn:hover{
            transform: translateY(-1px);
            box-shadow: 0 0 10px rgb(11, 83, 238);
        }
    </style>
</head>
<body>
    <div class="up_btn" onclick="up(1)">update</div>
    <div class="up_btn" onclick="up(2)">back</div>
    <div class="up_btn" onclick="fullScreen()">fullScreen</div>
    <div class="up_btn" onclick="exitScreen()">exitScreen</div>
    <div id="content"></div>
</body>
<script>
    var watches = [
        'images/1.jpg',
        'images/2.png',
        'images/3.jpg',
        'images/4.jpg',
        'images/5.png',
        'images/6.png'
    ]
    var update = null
    update = init_el_wrap(document.body,watches,2/3)
    
    function up(number){
        if(number == 1){
            update(['images/1.jpg'])
        }else{
            update(watches)
        }
        
    }
    // init_el_wrap(document.getElementById("content"),watches)
    // window.onload = function(){
    //     setTimeout(fullScreen,50)
    // }
    // window.onclick = fullScreen
    // fullScreen()
    //全屏
    function fullScreen(){
        var el = document.documentElement;
        var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;      
            if(typeof rfs != "undefined" && rfs) {
                rfs.call(el);
            };
            return;
    }
     //退出全屏
     function exitScreen(){
            if (document.exitFullscreen) {  
                document.exitFullscreen();  
            }  
            else if (document.mozCancelFullScreen) {  
                document.mozCancelFullScreen();  
            }  
            else if (document.webkitCancelFullScreen) {  
                document.webkitCancelFullScreen();  
            }  
            else if (document.msExitFullscreen) {  
                document.msExitFullscreen();  
            } 
            if(typeof cfs != "undefined" && cfs) {
                cfs.call(el);
            }
        }
</script>
</html>